<template>
  <view v-show="visible" class="loading-mask">
	  <view class="loading-spinner">
		<svg viewBox="25 25 50 50" class="circular">
			<circle cx="50" cy="50" r="20" fill="none" class="path"></circle>
		</svg>
	  </view>
  </view>
</template>

<script>
export default {
  data () {
    return {
      visible: false
    }
  }
}
</script>
<style scoped>
.loading-mask {
	position: absolute;
	z-index: 2000;
	background-color: hsla(0, 0%, 100%, .9);
	top: 0;
	left: 0;
	bottom: 0;
	right: 0;
	transition: opacity .3s;;
}
.loading-spinner {
	top: 50%;
	margin-top: -42rpx;
	width: 100%;
	text-align: center;
	position: absolute;
}
.circular {
	height: 84rpx;
	width: 84rpx;
	animation: loading-rotate 2s linear infinite;
}
.path {
	stroke-width: 2;
	stroke: #409eff;
	stroke-dasharray: 90, 150;
	stroke-dashoffset: 0;
	stroke-linecap: round;
	animation: loading-dash 1.5s ease-in-out infinite;
}
@keyframes loading-rotate {
	to {
		transform:rotate(1turn)
	}
}
@keyframes loading-dash {
	0% {
		stroke-dasharray:1,200;
		stroke-dashoffset:0
	}
	50% {
		stroke-dasharray:90,150;
		stroke-dashoffset:-40px
	}
	to {
		stroke-dasharray:90,150;
		stroke-dashoffset:-120px
	}
}
</style>